<template>
  <div class="total-item">
    <div class="m-portlet__body">
      <div class="m-widget4">
        <div class="m-widget4__item" v-for="(item ,index) in viewModel" :key="index" :style="`background-color: ${item.bgcolor};`">
          <div class="m-widget4__ext m-widget4__eleft">
            <span class="m-widget4__icon m--font-brand">
              <i class="icon iconfont" :style="`color: ${item.icon.color};`" :class="item.icon.name"></i>
            </span>
          </div>
          <div class="m-widget4__info">
            <span class="m-widget4__text" :style="`color: ${item.color};`">
              {{item.name}}
            </span>
          </div>
          <div class="m-widget4__ext">
            <span class="m-widget4__number m--font-info">
              {{item.value}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  export default {
    props: {
      viewModel: {}
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "./style.scss";
</style>
